<!-- <%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <!-- 页面meta -->
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">

      <title>数据后台管理 -首页欠费账户展示 </title>
      <meta name="description" content="权限">
      <meta name="keywords" content="权限">

      <!-- Tell the browser to be responsive to screen width -->
      <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

      <!-- 引入css -->
      <jsp:include page="common/css.jsp"></jsp:include>
      <!-- 引入css /-->

   </head>


   <body class="hold-transition skin-blue sidebar-mini" style="overflow:scroll;overflow-x:hidden">

            <!-- 正文区域 -->
            <section class="content"> <!-- .box-body -->
               <div class="box box-default">
               <div class="box-header with-border">
                  <h3 class="box-title">欠费账户</h3>
               </div>

               <div class="box-body">
                  <!-- 数据表格 -->
                  <div class="table-box">
                     <!--数据列表-->
                     <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                        <thead>
                           <tr>
                              <th>门牌号</th>
                              <th>自编号</th>
                              <th>用户名</th>
                              <th>账户余额</th>
                           </tr>
                        </thead>
                        <tbody></tbody>
                     </table>
                     <!--数据列表/-->

                  <table align="left">
                     <tr><td><div id="barcon"></div></td></tr>
                  </table>
                  </div>
                  <!-- 数据表格 /-->
               </div>
               <!-- /.box-body -->

            </div>
            </section>
            <!-- 正文区域 /-->

            
   </body>
   <!-- 引入js -->
   <jsp:include page="common/js.jsp"></jsp:include>
   <!-- 引入js /-->


   <script>
        $(function(){
            $.ajax({
                url:"${pageContext.request.contextPath}/accountOwe/main",
                type:"post",
                success: function(data){
                    var obj=eval(data);
                    var tbody=$('<tbody></tbody>');
                    $(obj).each(function (index){
                        var val=obj[index];
                        var tr=$('<tr></tr>');
                        tr.append('<td>'+ val.roomNo + '</td>' + '<td>'+ val.selfMeterNum + '</td>' +'<td>'+ val.userName + '</td>'+'<td>'+ val.account+ '</td>');
                        tbody.append(tr);
                    });
                    $('#dataList tbody').replaceWith(tbody);

                    goPage(1,8)

                }
            });
        });


        /**
         * 分页函数
         * pno--页数
         * psize--每页显示记录数
         * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
         * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
         **/
        function goPage(pno,psize){
            var itable = document.getElementById("dataList");
            var num = itable.rows.length;//表格所有行数(所有记录数)
            var totalPage = 0;//总页数
            var pageSize = psize;//每页显示行数
            //总共分几页
            if((num-1)/pageSize > parseInt((num-1)/pageSize)){
                totalPage=parseInt((num-1)/pageSize)+1;
            }else{
                totalPage=parseInt((num-1)/pageSize);
            }
            var currentPage = pno;//当前页数
            var startRow = (currentPage - 1) * pageSize+1;//开始显示的行
            var endRow = currentPage * pageSize;//结束显示的行
            endRow = (endRow > num)? num : endRow;
            //遍历显示数据实现分页
            for(var i=1;i<num;i++){
                var irow = itable.rows[i];
                if(i>=startRow && i<endRow){
                    irow.style.display ="";
                }else{
                    irow.style.display ="none";
                }
            }
            var pageEnd = document.getElementById("pageEnd");
            var tempStr = "共 "+(num-1)+" 条记录        分 "+totalPage+" 页        当前第 "+currentPage+" 页";
            if(currentPage>1){
                tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">                首页</a>";
                tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\">                <上一页</a>"
            }else{
                tempStr += "                首页";
                tempStr += "                <上一页";
            }
            if(currentPage<totalPage){
                tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">              下一页></a>";
                tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">                尾页</a>";
            }else{
                tempStr += "                下一页>";
                tempStr += "                尾页";
            }
            document.getElementById("barcon").innerHTML = tempStr;
        }
   </script>

</html>
